<script setup>
  /* 从 vue 中引入 reactive  */
  import {reactive} from 'vue'
  let data = reactive ({
    counter:0
  })
  function show() {
    alert(data.counter)
  }
  /* 该函数在操作 reactive 处理过的数据，需要通过对象名.属性名的方式 */
  let decr = () => {
    data.counter--
  }
  let incr = () => {
    data.counter++
  }
</script>

<template>
  <div>
    <button @click="data.counter--">-</button>
    <button @click="decr">-</button>
    {{data.counter}}
    <button @click="data.counter++">+</button>
    <button @click="incr">+</button>
  </div>
</template>

<style scoped>

</style>
